<template>
    <!--begin::Stats Widget 10-->
    <div class="card card-custom card-stretch gutter-b">
      <!--begin::Header-->
      <div class="card-header border-0" header-bg-variant="primary">
        <h3  class="card-title font-weight-bolder text-dark">浏览器分布</h3>
        <div class="card-toolbar">
        </div>
      </div>
      <!--begin::Body-->      
      <div class="card-body pt-2">
        <div id="browChart" style="width:100%;height:100%;text-align: center;margin: auto;"></div>
        <!-- <b-card-group deck>
            <b-card
                header="浏览器分布"
                border-variant="white"
                header-bg-variant="primary"
                header-text-variant="white"
                align="center"
            >
              <b-card-text>
                <div id="browChart" style="width:100%;height:100%;text-align: center;margin: auto;"></div>
              </b-card-text>
            </b-card>
          </b-card-group> -->
      </div>
      <!--end::Body-->
    </div>
    <!--end::Stats Widget 10-->
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js";
  import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";  
  export default {
    name: "widget-12",
    data() {
      return {
          dataList: [],
          browChart: null,
      };
    },
    computed: {
      ...mapGetters(["layoutConfig"])
    },
    mounted() {    
        setTimeout(() => {
            this.initChart();
            // this.initData();
            // this.getOnlineCount();
        }, 500);
    },
    methods: {
        initChart() {
            this.browChart = this.$echarts.init(document.getElementById('browChart'));
            this.browChart.setOption({
                title: {
                    text: '',
                    x: 'center',
                    align: 'center',
                    verticalAlign: 'middle',
                    y: 50
                },              
                tooltip: {
                    headerFormat: '{series.name}<br>',
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },                
                series: [
                    {
                        name: '分布情况',
                        type: 'pie',
                        options3d: {
                            enabled: true,//使用3d功能
                            alpha: 60,//延y轴向内的倾斜角度
                            beta: 0,   
                        },
                        colorByPoint: true,
                        showInLegend: true,
                        size:'180%',
            			innerSize: '90%',
                        radius: '50%',
                        center: ['50%', '50%'],
                        data: [
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        initData() {
            if (null != this.browChart) {
            apiUtil.get(process.env.VUE_APP_LOG_API + "/logLogin/browser/report", this.searchForm).then(({ data }) => {
                    let option = this.browChart.getOption();
                    option.series[0].data = data.data;
                    this.browChart.setOption(option);
                });
            }
        },
        getOnlineCount() {
            apiUtil.get(process.env.VUE_APP_OAUTH_API + "/oauthOnline/count", null).then(({ data }) => {
                this.onlineCount = data.data+"/人";
            });
        },
    }
  };
  </script>
  